<template>
	<view>
		<view class="container">
			<view class="topbox">
				<image src="/static/icon/icon_ask.png" class="icon_ask" mode="aspectFill"></image>
				<view class="fs32 pb20 fwb">买房，从问问开始</view>
				<view class="fs24 col89">佳和房产承诺：所有问答均来自真实用户和经纪人购房交流过程中</view>
			</view>
			<view class="pt20">
				<button @tap.stop.prevent="addAppointLog" data-type="2" data-subtype="0" :data-uid="broker_user_id" class="btn">快速预约咨询</button>
				<view class="or">或者</view>
				<textarea @input="questionFuc" :value="question" placeholder="在这里了输入您的问题" placeholder-class="colc">{{ question }}</textarea>
				<button @tap="submit" class="btn">提交问题</button>
			</view>
		</view>
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<view class="fs30 col-darkGray tc mb40">
					<view>买房政策、房源信息、楼盘分析…</view>
					<view>有问题，他将在第一时间为您解答！</view>
				</view>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun" :value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码" placeholder-style="color:#ccc;" /></view>
				<view  @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>	
</template>

<script>
	const app = getApp();
	
	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				popupStatus: false,
				//订阅咨询预约弹窗
				reserveStatus: false,
				//预约成功弹窗
				// 预约订阅类型
				appoint_type: 1,
				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,
				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',
				appoint_mobile_text: '',
				broker_user_id: 0,
				
				house_id: 0,
				question: ''
			}
		},
		onLoad: function (options) {
			this.house_id=options.house_id || 0;
			this.broker_user_id=options.broker_user_id || 0
		},
		methods: {
			submit() {
				var that = this;
				var json = {
					broker_user_id:   this.broker_user_id,
					house_ids:   this.house_id,
					question:   this.question 
				};
	
				if (!  this.question) {
					functions.toast('请输入问题内容');
					return false;
				}
				functions.checkLogin(function (ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(that, '/api/xiluhouse/question/publish_question', json, function (res) {
							
							functions.showSuccess(res.msg,function(){
								uni.navigateBack();
							});
						});
					} else {
						functions.toast('请先登录');
					}
				});
			},
	
			questionFuc(e) {
				this.question=e.detail.value
			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				var that = this;
				functions.checkLogin(function (ret) {
					if (ret) {
						functions.jumpToChat(uid);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 添加预约记录
			addAppointLog(e) {
				this.appoint_type= e.currentTarget.dataset.type;
				this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
				this.broker_user_id= e.currentTarget.dataset.uid || 0; 
				// 处理手机号码
				this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus=true;
			},
			appoint_mobileFun(e) {
				this.appoint_mobile=e.detail.value
			},
			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
				  functions.toast('请输入正确的手机号');
				  return false;
				}
				functions.checkLogin(function (ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile=appoint_mobile;
			
						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log',
							{
								house_id: that.house_id,
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
							},
							function (res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' + appoint_mobile.substr(7);
								that.reserveStatus=true;
								that.popupStatus=false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			closePopupStatus() {
				this.popupStatus=false;
			},
			closeReserveStatus() {
				this.reserveStatus=false;
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f6f7fa;
	}

	.container .btn {
		width: 670rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		padding: 0;
		margin: 40rpx auto 0;
		line-height: 90rpx;
		font-weight: normal;
		color: #fff;
		font-size: 30rpx;
	}

	.topbox {
		padding: 30rpx 0 40rpx;
		text-align: center;
		background-color: #fff;
	}

	.icon_ask {
		width: 605rpx;
		height: 195rpx;
		margin-bottom: 10rpx;
	}

	.or {
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		color: #898989;
	}

	textarea {
		margin: 0 auto;
		width: 670rpx;
		height: 228rpx;
		border-radius: 10rpx;
		background: #ffffff;
		padding: 30rpx;
	}
</style>
